<template>
	<view class="container">
		<use-navbar ref="navbar" title="我的优惠券"></use-navbar>

		<view class="pos-f w-full navbar-area bg-drak" :style="{ top: navbarHeight + 'px' }">
			<view class="state-area dflex-a">
				<view v-for="(item, index) in navList" :key="index" :class="{ active: tabCurrentIndex === index }"
					class="nav-item dflex-c pos-r fs padding-lr-lg h-full" @click="tabClick(index)">
					{{ item.state }}
					<text v-if="item.cnt > 0">({{ item.cnt }})</text>
				</view>
			</view>
		</view>

		<swiper :current="tabCurrentIndex" :disable-touch="true" class="swiper-box swiper-area h-full" duration="300"
			@change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content h-full" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<use-empty v-if="tabItem.datas.length === 0 && tabItem.loaded" e-style="round" e-type="cart"
						tip="暂无优惠券" btn-tip="去领券" height="78vh" :auto="false" @goto="toCoupon"></use-empty>
					<view class="padding-lr" v-for="(item, index) in tabItem.datas" :key="index">
						<view class="coupon-area border-radius margin-top-sm bg-main"
							:class="[{ 'disabled': tabItem.state != '已领取' }]">
							<view class="dflex-b">
								<view class="left pos-a h-full dflex-c dflex-flow-c">
									<view v-if="item.type == '满减'">
										<text class="price fs-big">{{ item.price / 100 }}</text>
									</view>
									<view v-if="item.type == '折扣'">
										<text class="discount fs-big">{{ item.price / 100 }}</text>
									</view>
									<view class="fs-sm" v-if="item.order_amount > 0">满{{ item.order_amount }}元使用</view>
									<view class="fs-sm" v-else-if="item.allow_type==='goods'">指定商品可用</view>
									<view class="fs-sm" v-else>全场通用</view>
								</view>
								<view  class="right padding left_t flex1">
									<view class="dflex-b padding-bottom-xs">
										<view class="fwb fs">{{ item.name }}</view>
									</view>
									<view v-if="tabItem.state == '已使用'" class="ft-dark iconfont iconyishiyong"></view>
									<view v-if="tabItem.state == '已过期'" class="ft-dark iconfont iconyiguoqi"></view>
									<view class="dflex-b ft-dark fs-xs padding-bottom border-line">
										<view class="">有效期至 {{ item.end_time }}</view>
									</view>
									<view class="fs-xs ft-dark padding-top-xs">{{ item.remark}}</view>
								</view>
								<view v-if="!item.receive" class="fs-xs  padding-top-xs" style="padding: 10rpx;" @click="use(item)">去使用</view>
								<view v-if="item.receive" class="fs-xs  padding-top-xs" style="padding: 10rpx;" >已赠送</view>
								<view  @click="shareOpen(item)" v-if="!item.receive&&item.coupon_type&&item.coupon_type==='mobile_coupon'" class="fs-xs  padding-top-xs" style="margin-left: 10rpx;padding: 10rpx;">赠送
								</view>
							</view>
						</view>
					</view>

					<!-- 上拉加载更多 -->
					<use-loadmore v-if="tabItem.datas.length > 0 && tabItem.loaded && tabItem.hasmore"
						:type="tabItem.loadingType"></use-loadmore>

					<view style="height: 200rpx;"></view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="pos-f btn-container padding-tb bg-drak">
			<view class="dflex-b margin-lr border-radius-big safe-area-inset-bottom-plus">
				<view class="tac padding-tb-sm flex1 bg-warn" @click="toExchange">我要兑换</view>
				<view class="tac padding-tb-sm flex1 bg-base" @click="toCoupon">领券中心</view>
			</view>
		</view>
		
		<!-- 分享 -->
		<use-popup mode="bottom" bgclass=" " v-model="shareShow">
			<view class="share-area margin border-radius bg-main">
				<view class="tac w-full padding-sm">分享</view>
				<view class="padding-lr margin-bottom-xl dflex-b pos-r">
					<!-- #ifdef MP-WEIXIN || APP -->
					<button class="dflex-c dflex-flow-c no-border btn use-hover" style="color: #07c160"
						open-type="share" @click="toShare(0)">
						<view class="iconfont iconweixin padding-lr-sm border-radius-c fs-xxxl"></view>
						<view class="dflex-c fs-sm ft-dark">微信好友</view>
					</button>
					<view class="vertical-line"></view>
					<!-- #endif --> 
				</view>
			</view>
		</use-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				coupon_id:"",
				shareShow:false,
				tabCurrentIndex: 0,
				navData: {},
				navList: [{
						id: 0,
						state: '已领取',
						cnt: 0,
						loadingType: 'more',
						datas: []
					},
					{
						id: 1,
						state: '已使用',
						cnt: 0,
						loadingType: 'more',
						datas: []
					},
					{
						id: 2,
						state: '已过期',
						cnt: 0,
						loadingType: 'more',
						datas: []
					}
				],
				reqdata: {
					page: 1,
					rows: 10
				},
				scrollLeft: 0,
				navbarHeight: 0
			};
		},
		watch: {
			tabCurrentIndex(nv, ov) {
				this.loadData('tab_change', 1);
			}
		},
		onLoad(options) {
			this.loadData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh');
		},
		// 上拉加载更多
		onReachBottom() {
			this.loadData();
		},
		mounted() {
			this.navbarHeight = this.$refs.navbar.navbarHeight;
		},
		onShareAppMessage: function(ops) { 
			let image = 'https://7463-tcb-0ensdli5proairw00b576-0ad17a-1308293149.tcb.qcloud.la/1707208157237_0.png';
			let title = '我正在给你赠送优惠券，赶紧领取使用吧'; 
			let path = '/sub-user/pages/coupon/receive?id='+this.coupon_id; 
		
			return {
				title: title,
				path: path, 
				imageUrl: image,
				summary:'我正在给你赠送优惠券，赶紧领取使用吧',
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},
		methods: {
			// 加载数据
			loadData(source = 'add', loading) {
				// 获取当前 nav
				let cur_nav = this.navList[this.tabCurrentIndex];

				if (cur_nav.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				this.reqdata.state = cur_nav.state;
				if (loading == 1 || source == 'refresh') {
					this.reqdata.page = 1;
				}
				if (source.type) {
					source.type = source.type.toLowerCase();
				}
				if (source === 'add' || source.type == 'scrolltolower') {
					if (cur_nav.loadingType == 'nomore') {
						return;
					}
					cur_nav.loadingType = 'loading';
				} else {
					cur_nav.loadingType = 'more';
				}

				this.$func.wmzmall.call('member/coupon', this.reqdata).then(res => {

					cur_nav.loaded = true;

					if (res.code === 200) {
						if (loading == 1 || source == 'refresh') {
							cur_nav.datas = [];
						}

						if (this.reqdata.page == 1) {
							let _nav = {};
							for (let _state in res.datas.dynamic) {
								_nav = this.navList.find(x => x.state == _state);
								if (_nav && _nav.state) {
									_nav.cnt = res.datas.dynamic[_state];
								}
							}
						}

						if (res.datas.data.length > 0) {
							let __datas = [];
							res.datas.data.forEach(row => {
								row.end_time = this.$api.format(row.end_time, 'yyyy-MM-dd hh:mm');
								__datas.push(row);
							});

							cur_nav.datas = [...cur_nav.datas, ...__datas];

							if (res.datas.data.length >= this.reqdata.rows) {
								if (this.reqdata.page == 1) {
									cur_nav.hasmore = true;
								}
								this.reqdata.page++;
								cur_nav.loadingType = 'more';
							} else {
								cur_nav.loadingType = 'nomore';
							}
						} else {
							cur_nav.loadingType = 'nomore';
						}
					}

					if (loading == 1) {
						uni.hideLoading();
					} else if (source == 'refresh') {
						uni.stopPullDownRefresh();
					}

					this.navData = cur_nav;
				});

			},

			// swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			// 顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			// 打开分享
			shareOpen(item) { 
				this.coupon_id=item._id
				this.shareShow = true;
			},
			async toShare(type) {  
				uni.share({
					type:0,
					scene:'WXSceneSession',
					title:"赠送优惠券",
					summary:'我正在给你赠送优惠券，赶紧领取使用吧',
					href:'http://wmzmall-h5.use-cloud.com?q=app',
					imageUrl:'http://wmzmall-h5.use-cloud.com?q=app',
					provider: "weixin",
					success: (res) => {
						uni.showLoading({
							title: res
						})
						console.log("success:", res);
					},
					fail: (err) => {
						console.log("fail:", err);
						uni.showLoading({
							title: err
						})
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			// 去使用
			use(res) {
				if (res.state == '已领取'){
					if(res.coupon_type){
						let mobile=""
						if(res.mobile){
							mobile=res.mobile
						}
						uni.navigateTo({
							url:'/sub-user/pages/coupon/use?mobile='+mobile+"&id="+res._id
						})
					}else{
						this.$api.togoodslist({
							coupon_id: res.coupon_id
						});
					}
				}
			},
			// 领券中心
			toCoupon() {
				uni.navigateTo({
					url: '/sub-marketing/pages/coupon'
				})
			},
			toExchange() {
				uni.navigateTo({
					url: '/sub-marketing/pages/coupon-exchange'
				})
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 100%;
		background: $page-color-base;
	}

	.container {
		padding-top: 7vh;
	}

	/* 优惠券状态区 */
	.navbar-area {
		top: 0;
		white-space: nowrap;

		.state-area {
			height: 7vh;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			z-index: 10;
		}

		.nav-item {
			flex: 1;

			&.active {
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: 0;
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	/* 优惠券轮播区 */
	.swiper-area {
		height: 93vh;
	}

	.coupon-area {
		position: relative;

		&:last-child {
			margin-bottom: 20rpx;
		}

		.left {
			background-color: $base-color;
			color: #fff;
			width: 30%;

			.price {
				color: #fff !important;
			}
		}

		.right {
			margin-left: 30%;
		}

		.border-line {
			border-bottom: 1px dotted #ededed;
		}

		.discount {
			color: #fff;
		}
	}

	.disabled {
		.left {
			background-color: #d9d9d9;
			color: #b2b2b2 !important;

			.price {
				color: #b2b2b2 !important;
			}
		}

		.iconfont {
			position: absolute;
			top: 0rpx;
			right: 30rpx;
			font-size: 110rpx;
		}
	}

	.btn-container {
		left: 20rpx;
		right: 20rpx;
		bottom: 0;
	}
</style>